<template>
  <div class="channel-member">
    <div class="header">
      <div class="header-background">
        <div class="header-background-title">受试者列表</div>
      </div>
      <div class="header-info">
        <div class="header-info-detail">
          <ul>
            <li class="header-info-detail-header">参与人数</li>
            <li
              class="header-info-detail-content header-info-detail-content-color"
            >
              {{ mermberList.length }}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div v-if="mermberList.length > 0">
      <div class="content" v-for="member in mermberList">
        <div class="item-header">
          <div class="icon-name">
            {{ member.username }}
            <span class="icon-phone">{{ member.dh }}</span>
          </div>
          <div class="item-obtain">
            <div class="item-obtain-amount">{{ member.sex ? "男" : "女" }}</div>
          </div>
        </div>
        <div class="bottom-border">
          <div class="item flex-h flex-a-c flex-j-b">
            <div class="left">手机号:</div>
            <div class="right">{{ member.phone }}</div>
          </div>
          <div class="item flex-h flex-a-c flex-j-b">
            <div class="left">更新时间:</div>
            <div class="right">
              {{ member.updateTime | unixToDate(true, true) }}
            </div>
          </div>
          <div class="item flex-h flex-a-c flex-j-b">
            <div class="left">备注:</div>
            <div class="right">{{ member.stage | stageFilter }}</div>
          </div>
        </div>
        <div
          class="item-detail"
          @click="memberDetail(member.id, member.username)"
        >
          查看详情
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { wxshare } from "common/mixin";
import { getDoctorMemberList } from "api/channel";

export default {
  mixins: [wxshare],
  data() {
    return {
      value: "",
      mermberList: [],
    };
  },
  methods: {
    newQa() {
      this.$router.push({ path: "/question/info" });
    },
    memberDetail(id, name) {
      this.$router.push({
        path: "/question/detail",
        query: {
          id: id,
          name: name,
        },
      });
    },
  },
  mounted() {},
  created() {
    getDoctorMemberList({
      pageSize: 1000,
      pageNum: 1,
    })
      .then((data) => {
        this.mermberList = data.data.beanList;
      })
      .catch((msg) => {});
  },
  filters: {
    stageFilter(input) {
      let out = "";
      if (!input) {
        return "";
      }
      if (input.length === 2) {
        out = "已上传问卷和检查报告";
      } else if (input[0] === 1) {
        out = "已上传问卷";
      } else if (input[0] === 2) {
        out = "已上传检查报告";
      }

      return out;
    },
  },
};
</script>
<style lang="less">
.channel-member {
  .mint-searchbar {
    background: transparent;
  }
  .mint-searchbar-cancel {
    color: #fff;
  }
  .mintui-search {
    margin-right: 4px;
  }
  .item {
    padding: 0.6rem 0.2rem;
    font-size: 0.8rem;
  }
  .add-btn {
    font-size: 0.7rem;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 1rem;
    padding: 0.1rem 0.5rem;
  }
  .right {
    margin-left: 0.2rem;
    color: rgba(0, 0, 0, 0.6);
  }

  .header {
    width: 100%;
    height: 8rem;
    background: #549eef;
    background-image: linear-gradient(
      -90deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.4) 100%
    );
  }

  .header-background {
    text-align: center;
    padding-top: 1rem;
    color: rgba(255, 255, 255, 0.6);
  }

  .header-background-title {
    height: 1rem;
    line-height: 1rem;
    font-size: 0.7rem;
    color: rgba(0, 0, 0, 0.6);
  }

  .header-background-content {
    line-height: 1;
    font-size: 1.25rem;
  }

  .header-info {
    margin-top: 0.8rem;
    display: flex;
    text-align: center;
    justify-content: space-around;
  }

  .header-info-detail-header {
    font-size: 0.7rem;
    color: rgba(0, 0, 0, 0.6);
  }

  .header-info-detail-content {
    margin-top: 0.4rem;
    font-size: 0.9rem;
    color: rgba(243, 249, 253, 0.6);
  }

  .header-info li:first-child {
    margin-bottom: 0.25rem;
  }

  .header-line-vertical {
    width: 0.05rem;
    height: 2rem;
    background: rgba(229, 243, 253, 0.6);
  }

  .content {
    width: 17rem;
    background: #ffffff;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
    margin-top: 0.75rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0.25rem;
    border: 0.05rem solid rgba(32, 67, 106, 0.2);
    color: #20436a;
  }

  .item-detail {
    width: 6rem;
    /*height: 1.6rem;*/
    line-height: 1.6rem;
    margin: 0.6rem auto;
    border-radius: 0.2rem;
    text-align: center;
    border: 1px solid #20436a;
    /*background-image: linear-gradient(-90deg, #75B0F1 0%, #75D0F1 100%);*/
    /*box-shadow: 2px 2px 8px 0 rgba(117, 176, 241, 0.60);*/
    color: #20436a;
  }

  .item-header {
    display: flex;
    justify-content: flex-start;
    line-height: 2.35rem;
    border-bottom: 1px solid #e3e9ec;
    position: relative;
  }

  .icon-name {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    font-weight: bold;
  }
  .icon-phone {
    font-size: 0.7rem;
    color: rgba(14, -2147483648, -2147483648, 0.6);
    line-height: 25px;
  }
  .item-obtain {
    right: 0.5rem;
    position: absolute;
    font-size: 0.6rem;
    height: 2.35rem;
    line-height: 2.35rem;
    color: #9b9b9b;
  }

  .item-obtain-amount {
    display: inline-block;
    font-size: 0.9rem;
    padding-left: 0.25rem;
    color: #20436a;
  }

  .team-container {
    display: flex;
    text-align: center;
    justify-content: space-around;
    height: 3rem;
  }

  .team-detail {
    width: 7.25rem;
    height: 2rem;
    line-height: 2rem;
    margin: 0.9rem auto;
    border-radius: 1rem;
    text-align: center;
    background-image: linear-gradient(-90deg, #75b0f1 0%, #75d0f1 100%);
    box-shadow: 2px 2px 8px 0 rgba(117, 176, 241, 0.6);
    color: rgba(255, 255, 255, 1);
    float: left;
  }

  .bottom-border {
    margin: 0.1rem auto 0;
    width: 96%;
    border-bottom: 1px solid #e3e9ec;
  }

  .qudao-team-detail {
    width: 40%;
    height: 2rem;
    line-height: 2rem;
    margin: 0.9rem auto;
    border-radius: 1rem;
    text-align: center;

    box-shadow: 2px 2px 8px 0 rgba(117, 176, 241, 0.6);
    color: rgba(255, 255, 255, 1);
  }

  .qudao-team-detail-left {
    float: left;
    margin-left: 5%;
    background-image: linear-gradient(-90deg, #75b0f1 0%, #75d0f1 100%);
  }

  .qudao-team-detail-right {
    float: right;
    margin-right: 5%;
    background-image: linear-gradient(-90deg, #fb6b10 0%, #ffb208 100%);
  }

  .team-detail-suffix {
    font-size: 0.9rem;
    color: #4a4a4a;
    width: 5.1rem;
  }

  .team-detail-header {
    font-size: 0.6rem; // color: #9B9B9B;
    margin-bottom: 0.25rem;
    margin-top: 0.6rem;
  }

  .team-detail-content {
    font-size: 0.9rem;
    color: #000000;
  }

  .item-line-vertical {
    width: 0.05rem;
    height: 1.2rem;
    background: #9b9b9b;
    margin-top: 0.9rem;
  }

  .content-2 {
    height: 7rem;
    margin-bottom: 2rem;
  }

  .border-bottom-solid {
    border-bottom: 1px solid #e3e9ec;
  }

  .submit-container {
    margin-top: 0.9rem;
    text-align: center;
  }

  .submit-image {
    width: 16rem;
    height: 3.75rem;
  }
  .member-congratutation-info {
    font-size: 0.9rem;
    color: #fe8106;
    text-align: center;
    margin: 0.8rem 0 0.65rem;
    img {
      width: 1.5rem;
      vertical-align: middle;
      margin-right: 0.75rem;
    }
  }
}
</style>
